<template>
	<div class="role-auth">
		<a-table :columns="roleAuthColumns" :data="roleAuthata" :pagination="false">
			<template #operation="{ record }">
				<span class="operation__item" @click="openRoleTable(record)">查看权限</span>
			</template>
		</a-table>
		<look-auth-drawer ref="lookAuthDrawerRef" />
	</div>
</template>

<script setup lang="ts">
import { ref, computed, reactive } from 'vue';
import { user, errors } from '@/api';
import lookAuthDrawer from './components/lookAuthDrawer.vue';
import { ROLE_MAP } from '@/constant/adminMap';

const roleAuthColumns: any = [
	{
		title: '角色名称',
		dataIndex: 'roleName',
	},
	{
		title: '人数',
		dataIndex: 'personCount',
	},
	{
		title: '操作',
		slotName: 'operation',
		width: 190,
	},
];
const roleAuthCount = ref<Array<{ adminType: number; number: number }>>([]);
const roleAuthata = computed(() => {
	let list = Object.keys(ROLE_MAP).map((e) => {
		return {
			roleName: ROLE_MAP[e],
			adminType: Number(e),
			personCount: 0,
		};
	});
	return list.map((e) => {
		const countInfo = roleAuthCount.value.find((count) => count.adminType === e.adminType);
		if (countInfo) {
			e.personCount = countInfo.number;
		}
		return e;
	});
});
const lookAuthDrawerRef = ref();

const openRoleTable = (roleInfo: { adminType: number }) => {
	const { adminType } = roleInfo;
	lookAuthDrawerRef.value && lookAuthDrawerRef.value.show(adminType);
};
const getAdminCount = async () => {
	try {
		const { data, ok } = await user.getAdminCount();
		if (!ok) {
			return;
		}
		roleAuthCount.value = data.data;
	} catch (error) {
		errors(error);
	}
};
getAdminCount();
</script>

<style lang="less">
.role-auth {
	height: 100%;
	background: #fff;

	.operation__item {
		cursor: pointer;
		font-size: 14px;
		color: #386cff;
	}
}
</style>
